<template>
  <div class="message">
    <p v-for="item in navlist" @click="active(item)">
      <i v-if="activeitem==item.value"><img src="../img/choose_icon.png" alt=""></i>
      <i v-else>&nbsp;&nbsp;&nbsp;</i>&nbsp;&nbsp;{{item.lable}}
    </p>
    <button>发送</button>
  </div>
</template>

<script>
  export default {
    name: "console",
    data() {
      return {
        navlist: [
          {
            lable: "终端关机",
            value: "1"
          },
          {
            lable: "终端复位",
            value: "2"
          },
          {
            lable: "恢复出厂设置",
            value: "3"
          },
          {
            lable: "关闭数据通信",
            value: "4"
          },
          {
            lable: "关闭所有无线通信",
            value: "5"
          },
        ],
        activeitem: 1
      }
    },
    methods: {
      active(val) {
        this.activeitem = val.value
      }
    }
  }
</script>

<style scoped>
  .message {
    float: left;
    width: 510px;
    height: 389px;
    margin-top: 25px;
    margin-left: 15px;
    /*border:1px solid red;*/
    /*box-sizing: border-box;*/
    overflow: hidden;
    background: url("../../../../static/img/bg_small.png") no-repeat center;
  }

  .message p {
    width: 100%;
    height: 27px;
    line-height: 27px;
    text-align: left;
    color: #afcefc;
    margin: 10px 0 0 20px;
    font-family: '微软雅黑', 'Avenir', Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    font-size: .09em;
    /*border:1px solid red;*/
    /*box-sizing: border-box;*/
  }

  .message i {
    display: inline-block;
    width: 15px;
    height: 15px;
    position: relative;
    top: 3px;
  }

  .message p:first-child {
    margin-top: 50px;
  }

  .judge {
    width: 450px;
    height: 121px;
    margin-top: 15px;
    margin-left: 19px;
    /*border:1px solid red;*/
    /*box-sizing: border-box;*/
    overflow: hidden;
    border: 1px solid #427fca;
    box-sizing: border-box;
    border-radius: 5px;
  }

  .judge textarea {
    width: 100%;
    height: 115px;
    line-height: 20px;
    vertical-align: top;
    color: #afcefc;
    background-color: rgba(8, 54, 81, 0);
    border: 0px
  }

  /*.judge p:first-child{margin-top:5px;}*/
  button {
    position: absolute;
    bottom: 80px;
    width: 122px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-family: '微软雅黑', 'Avenir', Helvetica, Arial, sans-serif;
    border: 0px;
    margin-left: 207px;
    background: url("../../../../static/img/bt-checked.png") no-repeat center;
    color: #009fff

  }
</style>
